<template>
	<div class="menulist">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/menu' }">菜单库</el-breadcrumb-item>
		</el-breadcrumb>
		<search-add btnName='新增菜单' @add-link="addmenu" class="serarchadd"></search-add>
		<div class="main">
			<div class="search">
				<span class="lable">协议方式:</span>
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<div class="btngroup">
					<el-button icon="el-icon-delete" type="danger" @click="deleteAll(multipleSelection)">批量删除</el-button>
					<!-- <el-button type="info" icon="el-icon-upload2">导出</el-button> -->
					<el-button icon="el-icon-refresh" type="primary">刷新</el-button>
				</div>
			</div>
			<table cellspacing="0">
				<thead>
					<tr>
						<th style="width: 7%;"><i class="el-icon-edit"></i>全选</th>
						<th style="width: 5%;">序号</th>
						<th style="width: 13%;">图标</th>
						<th style="width: 15%;">菜单名称</th>
						<th style="width: 10%;">子菜单个数</th>
						<th style="width: 15%;">子菜单名称</th>
						<th style="width: 15%;">链接分类</th>
						<th style="width: 10%;">备注</th>
						<th style="width: 10%;">操作</th>
					</tr>
				</thead>
			</table>
			<div class="table-scroll">
				<table cellspacing="0" class="table-height">
					<tbody id="tbodyid">
						<tr v-for="(item,index1) in tableData" :key="index1">

							<td style="width: 7%;"><input type="checkbox" class="checkbox" v-bind:value="item.id" /> </td>
							<td style="width: 5%;">{{index1+1}}</td>

							<td style="width: 13%;">
								<div class="picture-item-wrapper">
									<div class="picture"><img class="item-pic" :src="item.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+item.image.storeId"  @error="imgError(item.image)" alt=""></div>
								</div>
							</td>
							<td style="width: 15%;">{{item.name}}</td>
							<td style="width: 10%;">{{item.children.length}}</td>
							<td style="width: 15%;">
								<ul class="tableul">
									<li v-for="(subitem,index) in item.children" :class="(index==2&&item.children.length>3)? 'listyle2':'listyle1'" :key="index" v-if="index<3">

										<span class="picture-item-wrapper lispan">
													<span class="picture pic" ><img class="item-pic img" :src="subitem.image==null?picsrc:'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId='+subitem.image.storeId"  @error="imgError(subitem.image)" alt=""></span>
										</span>
										<span>{{subitem.name}}</span>
										<el-button type="text" @click="showDetail(index1)" v-if="item.children.length>3&&index==2" class="libutton">【更多】</el-button>
									</li>
									<li class="linone" v-if="item.children.length==0"></li>
									<li class="linone" v-if="item.children.length==0"></li>
									<li class="linone" v-if="item.children.length==0"></li>
									<li class="linone" v-if="item.children.length==1"></li>
									<li class="linone" v-if="item.children.length==1"></li>
									<li class="linone" v-if="item.children.length==2"></li>
								</ul>
							</td>
							<td style="width: 15%;">
								<ul style="display: flex;flex-direction: column;">

									<!--<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;">l</li>
											<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;">1</li>
											<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;" >1</li>-->

									<li v-for="(subitem,index) in item.children" :key="index" v-if="index<3" class="ulli" >
										{{subitem.target}}
									</li>
									<li style="flex: 1;border-top: 1px solid #d3d4d6;padding: 20px 70px 20px 70px;" v-if="item.children.length==0"></li>
									<li class="lione" v-if="item.children.length==0"></li>
									<li class="lione" v-if="item.children.length==0"></li>
									<li class="lione" v-if="item.children.length==1"></li>
									<li class="lione" v-if="item.children.length==1"></li>
									<li class="lione" v-if="item.children.length==2"></li>
								</ul>

							</td>
							<td style="width: 10%;">{{item.remark}}</td>

							<td style="width: 10%;">
								<el-button size="mini" class="pot" @click="editRow(index1,item.id)">修改</el-button>
								<el-button size="mini" class="pot" @click="deleteRow(item.id)">清除</el-button>
							</td>
						</tr>
					</tbody>

				</table>
			</div>
			<el-pagination 
			@size-change="handleSizeChange" 
			@current-change="handleCurrentChange" 
			:current-page="currentPage" 
			:page-sizes="[1, 2, 3, 4]" 
			:page-size="pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			class="pagelist" 
			:total="total">
			</el-pagination>
		</div>
		<el-dialog :visible.sync="dialogTableVisible">
			<template slot="title">
				<h1 v-if="tableData.length>0">菜单{{tableData[menuindex].name}}的子菜单有:</h1>
			</template>
			<el-table style="width:100%;" v-if="tableData.length>0" :data="tableData[menuindex].children">
				<el-table-column property="name" label="子菜单名称" width="200"></el-table-column>
				<el-table-column property="target" label="链接分类" ></el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import searchAdd from "@/components/searchAdd";
	import { getAllmenu} from "@/api/menu"
	import { getParentmenu,deleteMenu} from "@/api/menu"
	export default {
		name: "menulist",
		components: {
			searchAdd
		},
		data() {
			return {
				currentPage: 1,
				pageSize:2,
				total:0,
				menuindex: 0, //【更多】index
				menudetail: [],
				picsrc:require('../../assets/img/shzats.png'),
				dialogTableVisible: false,
				options: [{
						value: "选项1",
						label: "地图链接"
					},
					{
						value: "选项2",
						label: "平台链接"
					},
					{
						value: "选项3",
						label: "外部链接"
					}
				],
				value: "全部",
				dialoglistVisible: false,
				morelist: [],
				tableData: [],

			};
		},
		mounted() {
			this.getMenuData(this.pageSize,this.currentPage);
		},
		methods: {
			imgError(item) {
				if(item.storeId){
					item.image.storeId = require('../../assets/img/shzats.png');
				}
				
			},
			addmenu() {
				this.$router.push({
					name: '新增菜单',
					params: {
						menu: {
							name: "新增菜单",
							txt: "New"
						}
					}
				});
			},
			showDetail: function(index) {
				//定义显示数据
				this.menuindex = index;
				this.dialogTableVisible = true;
			},
			deleteRow: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				console.log(id);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					deleteMenu(id).then(res=>{
					console.log(res);
					if(res.status==200){
						this.$message({
								type: 'success',
					message: '菜单删除成功！'
						});
						this.getMenuData(this.pageSize,this.currentPage);
						for(var i = 0; i < this.tableData.length; i++) {
							if(this.tableData[i].id == id) {
								this.tableData.splice(i, 1);
							}
						}
					}
					
				}).catch(error=>{
					this.$message('菜单删除失败！请检查是否有子菜单？');
					console.log(error)
				})
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
				
				
			},
			editRow: function(index, id) {
				this.$router.push({
					name: '编辑菜单',
					params: {
						menu: {
							name: "编辑菜单",
							txt: "Edit"
						},
						menuid:id
					}
				})
			//	alert(id);

			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getMenuData(this.pageSize,this.currentPage);
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage=val;
       			this.getMenuData(this.pageSize,this.currentPage);
				console.log(`当前页: ${val}`);
			},
			getMenuData(pageSize,pagecur) {
				 let pagelist={
			        pageNum: pagecur,
			        pageSize: pageSize
			      }

				getParentmenu(pagelist).then(result => {
					console.log(result.data)
					var tablelist = [];
					let data = result.data.data;
					this.total=result.data.elementsSum;
					console.log(this.total+"====");
					var json = {}; //去重的中间变量

					for(var i = 0; i < data.length; i++) {
						if(data[i]["children"] == null) {
							data[i]["children"] = [];
							console.log(data[i]["children"]);
						} else{

						}
					}

					// console.log(tablelist,"------");
					// this.tableData = tablelist;
					this.tableData = data;
					
					
        			console.log(data,"**************")
        			console.log(this.tableData)


				})
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.menulist {
		background: white;
		padding: 8px;
		border-radius: 8px;
		.el-breadcrumb {
			font-size: 1.2em;
			padding: 8px;
			position: relative;
			padding-left: 40px;
		}
		ul li:first-child {
			border-top: none !important;
		}
		table,
		table tr th,
		table tr td {
			border: 1px solid #9fa1a0;
			text-align: center;
		}
		table tr th {
			height: 43px;
			background-color: #2a323d;
			color: #ffffff;
		}
		table tr td {
			height: 125px;
		}
		table {
			width: 100%;
		}
		thead{
			width:100%;
		}
		tbody tr {
			height: 125px;
		}
		.table-scroll {
			//height: 503px;
			overflow: scroll;
			width: 100%;
			.pot {
				padding: 0;
			}
			.table-height {
				max-height: 503px;
				.checkbox {
					height: 16px;
					width: 16px;
					background-color: #ffffff;
				}
				.tableul {
					display: flex;
					flex-direction: column;
					.lispan {
						width: 35px;
						height: 35px;
						float: left;
						margin-top: -4px;
						margin-bottom: -2px;
						.pic {
							width: 35px;
							height: 35px;
							margin-left: 50px;
						}
					}
				}
				.libutton {
					margin-top: 4px;
					float: right;
				}
			}
			#tbodyid {
			width:100%;
			}
		}
		.listyle1 {
			flex: 1;
			border-top: 1px solid #d3d4d6;
			padding: 5px 70px 5px 70px;
			/*	padding: 10px 70px 8px 70px;*/
		}
		.listyle2 {
			flex: 1;
			border-top: 1px solid #d3d4d6;
			padding: 5px 0px 5px 70px;
		}
		.ulli {
			flex: 1;
			border-top: 1px solid #d3d4d6;
			padding: 9px 0;
		}
		.lione {
			flex: 1;
			border-top: 1px solid #d3d4d6;
			padding: 20px 70px 20px 70px;
		}
		.linone {
			flex: 1;
			border-top: 1px solid #d3d4d6;
			padding: 20px 70px 20px 70px;
		}
		.table-scroll::-webkit-scrollbar {
			display: none;
		}
		.picture-item-wrapper {
			width: 100%;
			.picture {
				position: relative;
				left: calc(50% - 50px);
				width: 100px;
				height: 100px;
				/*margin: 14px 20px 12px 20px;*/
				display: flex;
				justify-content: center;
				overflow: hidden;
				user-select: none;
				background-color: #29333d;
				.item-pic {
					position: absolute;
					max-width: 100px;
					max-height: 100px;
					margin: auto;
					margin-left: -120px;
					top: 0;
					bottom: 0;
					border-right: 0 solid transparent;
					filter: drop-shadow(120px 0 #93c4ff);
				}
				.img {
					width: 20px;
					height: 20px;
				}
			}
		}
		.el-breadcrumb__item::after {
			position: absolute;
			left: 12px;
			top: -2px;
			display: inline-block;
			margin: 12px 10px 0 12px;
			vertical-align: bottom;
			width: 8px;
			height: 18px;
			background-color: #2ce2e0;
			content: ''
		}
	}
	
	.main {
		padding: 8px 26px;
	}
	
	.serarchadd {
		margin: 10px 0;
	}
	
	.lable {
		margin-right: 8px;
	}
	
	#menutable th {
		background: #29313d !important;
		color: white;
		border-color: #9f9f9f;
	}
	
	#menutable th,
	#menutable td {
		text-align: center;
	}
	
	#menutable .mname {
		text-align: left;
		padding: 0 !important;
		margin: 0 !important;
		div {
			margin: 0 -7px;
			;
		}
	}
	
	#menutable .tablelist {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}
	
	#menutable .tablelist li {
		flex: 1;
		padding: 0 10px;
		text-align: left;
		border-bottom: 1px solid #ebeef5;
	}
	
	#menutable .tablelist li:last-child {
		border-bottom: none;
	}
	
	#menutable .linktype li {
		padding: 8px;
	}
	
	.more {
		margin-left: 20px;
	}

	.pagelist {
      height: 30px;
      line-height: 30px;
      margin:16px 8px;
      .btn-next {
        background-image: url("../../assets/img/next1.png");

      }
      .btn-prev {
        margin-left: 25%!important;
        background-image: url("../../assets/img/pre1.png");
      }
    }
</style>